var toc_IM_CanvasController={
	deviceUA:0,	//0手机 touch , 1PC mouse
	canvasel:null,
	canvasContext:null,
	mousePressed:false,
	eventNameMap:{
		start:['touchstart','mousedown'],
		move:['touchmove','mousemove'],
		end:['touchend','mouseup']
	},
	lastX:null,
	lastY:null,
	pancilConfig:{
		color:'black',
		size:3
	},
	init:function(){
		var _self =this;
		this.canvasel=document.getElementById('toc_IM_Canvas');
		this.bindPanel();
		this.canvasel.width=window.innerWidth;
		this.canvasel.height=(window.innerHeight - 100);
		this.canvasContext=this.canvasel.getContext("2d");
		var eventType=this.deviceUA;
		this.canvasel.addEventListener(this.eventNameMap.start[eventType],function(e) {
             _self.mousePressed = true;
             if(eventType==0){
             	_self.draw(e.touches[0].pageX, e.touches[0].pageY, false);
             }else if(eventType==1){
             	_self.draw(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop,false);
             };
        },false);
        
        this.canvasel.addEventListener(this.eventNameMap.move[eventType],function(e) {
            if (_self.mousePressed) {
	            if(eventType==0){
	             	_self.draw(e.touches[0].pageX, e.touches[0].pageY, true);
	            }else if(eventType==1){
	             	_self.draw(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop,true);
	            };
	        };
        },false);
        
        this.canvasel.addEventListener(this.eventNameMap.end[eventType],function(e) {
          	_self.mousePressed = false;
        },false);
        
		if(eventType==1){
			this.canvasel.addEventListener('mouseleave',function(e) {
	          	_self.mousePressed = false;
	        },false);
		};
	},
	draw:function(x, y, isDown){
		if(isDown){
	        this.canvasContext.beginPath();
	        this.canvasContext.strokeStyle = this.pancilConfig.color;
	        this.canvasContext.lineWidth = this.pancilConfig.size;
	        this.canvasContext.lineJoin = "round";
	        this.canvasContext.moveTo(this.lastX, this.lastY);
	        this.canvasContext.lineTo(x, y);
	        this.canvasContext.closePath();
	        this.canvasContext.stroke();
    	};
    	this.lastX = x; 
    	this.lastY = y;
	},
	clear:function(){
		this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
    	this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
	},
	openFloating_btn:function(){
		var toggle = $('div.main_btn_content');
	    var menu = $('#toc_IM_floating_btn');
	    var rot;
	    $('div.main_btn_content').on('click', function (){
	        rot = parseInt($(this).data('rot')) - 180;
	        menu.css('transform', 'rotate(' + rot + 'deg)');
	        menu.css('webkitTransform', 'rotate(' + rot + 'deg)');
	        if (rot / 180 % 2 == 0) {
	            toggle.parent().addClass('ss_active');
	            toggle.addClass('close');
	        } else {
	            toggle.parent().removeClass('ss_active');
	            toggle.removeClass('close');
	        }
	        $(this).data('rot', rot);
	    });
	    menu.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
	        if (rot / 180 % 2 == 0) {
	            $('#toc_IM_floating_btn div i').addClass('toc_IM_floating_btn_animate');
	        }else{
	            $('#toc_IM_floating_btn div i').removeClass('toc_IM_floating_btn_animate');
	        };
	    });
	},
	bindPanel:function(){
		//这块地方暂时用jq有时间改为原生
		var self =this;
		$('#toc_IM_Canvas_color').val('black');
		$('#toc_IM_Canvas_size').val('3')
		$('#toc_IM_Canvas_color').change(function(){
			self.pancilConfig.color=$(this).val();
		});
		$('#toc_IM_Canvas_size').change(function(){
			self.pancilConfig.size=$(this).val();
		});
		this.openFloating_btn()
	}
	
}
export default toc_IM_CanvasController
